<template>
  <div class="body">
    <div class="card" @click="toDetail">
      <div class="left">
        <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
      </div>
      <div class="right">
        <h4>{{ item.title }}</h4>
        <p>{{ item.desc }}</p>
        <p>{{ item.tags[0] }}</p>
        <span>{{ item.price }}/月</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RenderLi',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  methods:{
    toDetail(){
      this.$router.push({
        name:'detail',
        query:{id:this.item.houseCode}
      })
    }
  }
}
</script>

<style scoped lang="less">
.body {

  .card {
    display: flex;
    align-items: center;
    height: 140px;
    background-color: #fff;
    margin-bottom: 10px;
    padding-left: 14px;
    border-bottom: 1px solid #ccc;
    .left {
      width: 112px;
      height: 112px;
      background-color: pink;
      margin-right: 14px;
        img {
        width: 112px;
        height: 112px;
      }
    }
    .right {
      flex: 1;
      h4 {
        font-size: 14px;
        margin-bottom: 5px;
        margin-top: 0px;
      }
      p {
        font-size: 12px;
        color: #aaaaaa;
      }
      span {
        font-size: 12px;
      }
    }
  }
}
</style>
